<template>
  <div class="view-canvas" ref="container"></div>
</template>

<script setup>
import { ref, onActivated, nextTick } from "vue";
import BpmnViewer from 'bpmn-js/lib/Viewer';
import ModelingModule from 'bpmn-js/lib/features/modeling';
import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';

/*左边工具栏以及编辑节点的样式*/
import 'bpmn-js/dist/assets/diagram-js.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
const props = defineProps({
  xml: String,
  highlightList: {
    type: Array,
    default: () => []
  },
  handledList: {
    type: Array,
    default: () => []
  }
});

const viewer = ref(null);
const container = ref();

const init = async() => {
  if (!viewer.value) {
    viewer.value = new BpmnViewer({
      container: container.value,
      additionalModules: [
        ModelingModule,
        MoveCanvasModule
      ]
    });
  }

  viewer.value.clear();
  await viewer.value.importXML(props.xml);
  const canvas = viewer.value.get('canvas');

  props.highlightList.forEach(item => {
    canvas.addMarker(item, 'highlight');
  });

  props.handledList.forEach(item => {
    try {
      canvas.addMarker(item, 'handled');
      canvas.addMarker(item + "_label", 'handled');
    } catch(e) {
      // do it
    }
  });

  canvas.zoom('fit-viewport', 'auto');
};

onActivated(() => {
  nextTick(() => {
    init();
  });
});
</script>

<style scoped>
.view-canvas {
  height: 100%;
}
.view-canvas :deep(.bjs-powered-by) {
  display: none;
}
.view-canvas :deep(.djs-element) .djs-visual :not(text) {
  stroke-opacity: 0.3!important;
}
.view-canvas :deep(.djs-element).djs-connection .djs-visual defs marker path {
  fill-opacity: 0.4!important;
}
.view-canvas :deep(.djs-element).djs-shape .djs-visual path {
  fill-opacity: 0.4!important;
}
.view-canvas :deep(.djs-element) .djs-visual text tspan {
  fill-opacity: 0.5!important;
}
.view-canvas :deep(.djs-element).djs-connection[class*=handled] .djs-visual defs marker path {
  fill-opacity: 1!important;
}
.view-canvas :deep(.djs-element).djs-shape[class*=handled] .djs-visual path {
  fill-opacity: 1!important;
}
.view-canvas :deep(.djs-group) g[class*=handled] .djs-visual :not(text) {
  stroke-opacity: 1!important;
}
.view-canvas :deep(.djs-group) g[class*=handled] .djs-visual text tspan {
  fill-opacity: 1!important;
}
@keyframes fade {
  from {
    opacity: 1.0;
  }
  50% {
    opacity: 0.2;
  }
  to {
    opacity: 1.0;
  }
}

@-webkit-keyframes fade {
  from {
    opacity: 1.0;
  }
  50% {
    opacity: 0.2;
  }
  to {
    opacity: 1.0;
  }
}
.view-canvas {
  min-height: 100px;
}
.view-canvas :deep(.highlight) {
  animation: fade 1000ms infinite;
  -webkit-animation: fade 1000ms infinite;
}
</style>